<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  title: string
  value: number | string
  subtitle?: string
  icon?: string
  color?: string
  trend?: 'up' | 'down' | 'stable'
  trendValue?: number
  trendText?: string
  loading?: boolean
  prefix?: string
  suffix?: string
  decimals?: number
  animated?: boolean
  clickable?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  color: 'primary',
  trend: 'stable',
  loading: false,
  decimals: 0,
  animated: true,
  clickable: false
})

const emit = defineEmits<{
  'click': []
}>()

// 格式化数值
const formattedValue = computed(() => {
  if (props.loading) return '--'
  
  let value = props.value
  if (typeof value === 'number' && props.decimals > 0) {
    value = value.toFixed(props.decimals)
  }
  
  // 添加千分位分隔符
  if (typeof value === 'number' || (typeof value === 'string' && !isNaN(Number(value)))) {
    const num = Number(value)
    value = num.toLocaleString('zh-CN', { 
      minimumFractionDigits: props.decimals,
      maximumFractionDigits: props.decimals 
    })
  }
  
  return `${props.prefix || ''}${value}${props.suffix || ''}`
})

// 获取趋势图标
const trendIcon = computed(() => {
  switch (props.trend) {
    case 'up': return 'mdi-trending-up'
    case 'down': return 'mdi-trending-down'
    default: return 'mdi-trending-neutral'
  }
})

// 获取趋势颜色
const trendColor = computed(() => {
  switch (props.trend) {
    case 'up': return 'success'
    case 'down': return 'error'
    default: return 'grey'
  }
})

// 获取卡片主色调配置
const colorConfig = computed(() => {
  const configs = {
    primary: {
      bgGradient: 'linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%)',
      iconBg: 'rgba(25, 118, 210, 0.1)',
      iconColor: '#1976d2',
      valueColor: '#1565c0'
    },
    success: {
      bgGradient: 'linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%)',
      iconBg: 'rgba(34, 197, 94, 0.1)',
      iconColor: '#22c55e',
      valueColor: '#16a34a'
    },
    warning: {
      bgGradient: 'linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%)',
      iconBg: 'rgba(245, 158, 11, 0.1)',
      iconColor: '#f59e0b',
      valueColor: '#d97706'
    },
    error: {
      bgGradient: 'linear-gradient(135deg, #fef2f2 0%, #fecaca 100%)',
      iconBg: 'rgba(239, 68, 68, 0.1)',
      iconColor: '#ef4444',
      valueColor: '#dc2626'
    },
    info: {
      bgGradient: 'linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%)',
      iconBg: 'rgba(14, 165, 233, 0.1)',
      iconColor: '#0ea5e9',
      valueColor: '#0284c7'
    }
  }
  
  return configs[props.color as keyof typeof configs] || configs.primary
})

const handleClick = () => {
  if (props.clickable && !props.loading) {
    emit('click')
  }
}
</script>

<template>
  <VCard
    class="stat-card"
    :class="{ 
      'clickable': clickable && !loading,
      'loading': loading 
    }"
    elevation="3"
    @click="handleClick"
  >
    <VCardText class="stat-content">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-overlay">
        <VProgressCircular
          indeterminate
          color="primary"
          size="24"
        />
      </div>
      
      <!-- 卡片头部 -->
      <div class="stat-header">
        <div class="stat-info">
          <h4 class="stat-title">{{ title }}</h4>
          <p v-if="subtitle" class="stat-subtitle">{{ subtitle }}</p>
        </div>
        
        <div v-if="icon" class="stat-icon">
          <VIcon
            :icon="icon"
            :color="colorConfig.iconColor"
            size="32"
          />
        </div>
      </div>
      
      <!-- 主要数值 -->
      <div class="stat-value-section">
        <div class="stat-value" :class="{ 'animated': animated }">
          {{ formattedValue }}
        </div>
        
        <!-- 趋势指示器 -->
        <div v-if="trend !== 'stable' || trendValue" class="stat-trend">
          <VChip
            :color="trendColor"
            variant="flat"
            size="small"
            class="trend-chip"
          >
            <VIcon
              :icon="trendIcon"
              size="14"
              start
            />
            <span v-if="trendValue">{{ Math.abs(trendValue) }}%</span>
            <span v-if="trendText">{{ trendText }}</span>
          </VChip>
        </div>
      </div>
    </VCardText>
  </VCard>
</template>

<style scoped>
.stat-card {
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  background: v-bind('colorConfig.bgGradient');
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

.stat-card:hover:not(.loading) {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.stat-card.clickable {
  cursor: pointer;
}

.stat-card.clickable:hover {
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
}

.stat-card.loading {
  pointer-events: none;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  border-radius: 16px;
}

.stat-content {
  padding: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.stat-info {
  flex: 1;
}

.stat-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #64748b;
  margin: 0 0 4px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.4;
}

.stat-subtitle {
  font-size: 0.75rem;
  color: #94a3b8;
  margin: 0;
  line-height: 1.4;
}

.stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: v-bind('colorConfig.iconBg');
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.stat-card:hover .stat-icon {
  transform: scale(1.1) rotate(5deg);
}

.stat-value-section {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: auto;
}

.stat-value {
  font-size: 2.25rem;
  font-weight: 800;
  color: v-bind('colorConfig.valueColor');
  line-height: 1;
  margin: 0;
  transition: all 0.5s ease;
}

.stat-value.animated {
  animation: countUp 0.8s ease-out;
}

.stat-trend {
  align-self: flex-end;
  margin-left: 12px;
}

.trend-chip {
  font-size: 0.75rem;
  font-weight: 600;
  height: 28px;
  border-radius: 14px;
}

.trend-chip :deep(.v-chip__content) {
  padding: 0 8px;
}

@keyframes countUp {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .stat-content {
    padding: 20px;
  }
  
  .stat-header {
    margin-bottom: 16px;
  }
  
  .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }
  
  .stat-icon :deep(.v-icon) {
    font-size: 28px;
  }
  
  .stat-value {
    font-size: 1.875rem;
  }
  
  .stat-title {
    font-size: 0.8rem;
  }
  
  .stat-subtitle {
    font-size: 0.7rem;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .stat-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(51, 65, 85, 0.6) 100%);
    border-color: rgba(255, 255, 255, 0.1);
  }
  
  .stat-title {
    color: #cbd5e1;
  }
  
  .stat-subtitle {
    color: #94a3b8;
  }
  
  .loading-overlay {
    background: rgba(30, 41, 59, 0.9);
  }
}
</style>
